<!-- src/views/PhoneBinding.vue -->
<script setup lang="ts">
import { ref } from "vue";
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Card, CardContent } from '@/components/ui/card'
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@/components/ui/table";
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip'
import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@/components/ui/tabs'
import { Button } from "@/components/ui/button";
import { Mail, Smartphone, KeyRound, IdCard, PhoneCall, UserRound } from 'lucide-vue-next'

const loginRecords = ref([
    {
        id: 1,
        time: "2023-06-01 14:30:00",
        device: "iPhone 12",
        os: "IOS",
        ip: "192.168.1.1",
        location: "北京",
    },
    {
        id: 2,
        time: "2023-05-30 09:15:00",
        device: "MacBook Pro",
        ip: "192.168.1.2",
        os: "Win10",
        location: "上海",
    },
    {
        id: 3,
        time: "2023-05-28 18:45:00",
        device: "iPad Air",
        ip: "192.168.1.3",
        os: "Win10",
        location: "广州",
    },
    {
        id: 4,
        time: "2023-05-25 10:00:00",
        device: "Nick Pro",
        ip: "192.168.1.4",
        os: "Android",
        location: "深圳",
    },
]);

const sensitiveRecords = ref([
    {
        id: 1,
        time: "2023-06-01 14:30:00",
        action: "修改密码",
        ip: "192.168.1.1",
        device: "iPhone 12",
    },
    {
        id: 2,
        time: "2023-05-30 09:15:00",
        action: "绑定新手机号",
        ip: "192.168.1.2",
        device: "MacBook Pro",
    },
    {
        id: 3,
        time: "2023-05-28 18:45:00",
        action: "更改安全问题",
        ip: "192.168.1.3",
        device: "iPad Air",
    },
    {
        id: 4,
        time: "2023-05-25 10:00:00",
        action: "注销账号请求",
        ip: "192.168.1.4",
        device: "Windows PC",
    },
]);
</script>

<template>
    <div class="col-span-12 grid items-start gap-6 lg:col-span-1">
        <Card>
            <CardContent class="pt-6">
                <div class="flex items-center justify-between space-y-2">
                    <div>
                        <h2 class="text-2xl font-bold tracking-tight">
                            Nick 晚上好，欢迎回来
                        </h2>
                        <div class="space-y-1">
                            <p class="text-muted-foreground">
                                Here&apos;s a list of your tasks for this month!
                            </p>

                            <p class="text-muted-foreground">注册时间： 2023-01-01</p>
                            <p class="text-muted-foreground">账号状态： 正常</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <Button variant="ghost" class="relative h-24 w-24 rounded-full">
                            <Avatar class="h-24 w-24">
                                <AvatarImage src="/avatars/03.png" alt="@shadcn" />
                                <AvatarFallback>SC</AvatarFallback>
                            </Avatar>
                        </Button>
                        <p class="text-muted-foreground">Nick <Button variant="link" as="a"
                                href="/account/information/password">
                                修改昵称
                            </Button></p>
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger as-child>
                                    <Button variant="outline" size="icon" as="a" href="/account/information/password">
                                        <KeyRound class="w-4 h-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>修改密码</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger as-child>
                                    <Button variant="outline" size="icon" as="a" href="/account/information/phone">
                                        <Smartphone class="w-4 h-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>绑定手机</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger as-child>
                                    <Button variant="outline" size="icon" as="a" href="/account/information/email">
                                        <Mail class="w-4 h-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>绑定电子邮箱</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger as-child>
                                    <Button variant="outline" size="icon" as="a" href="/account/information/password">
                                        <IdCard class="w-4 h-4" />
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>实名认证</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                </div>
            </CardContent>
        </Card>


        <Card>
            <CardContent class="pt-6">
                <Tabs default-value="account">
                    <TabsList>
                        <TabsTrigger value="account">
                            登录记录
                        </TabsTrigger>
                        <TabsTrigger value="password">
                            敏感记录
                        </TabsTrigger>
                    </TabsList>
                    <TabsContent value="account">

                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>时间</TableHead>
                                    <TableHead>设备</TableHead>
                                    <TableHead>系统</TableHead>
                                    <TableHead>地点</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                <TableRow v-for="record in loginRecords" :key="record.id">
                                    <TableCell>{{ record.time }}</TableCell>
                                    <TableCell>{{ record.device }}</TableCell>
                                    <TableCell>{{ record.os }}</TableCell>
                                    <TableCell>{{ record.location }}</TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                    </TabsContent>
                    <TabsContent value="password">

                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>时间</TableHead>
                                    <TableHead>操作类型</TableHead>
                                    <TableHead>IP地址</TableHead>
                                    <TableHead>设备</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                <TableRow v-for="record in sensitiveRecords" :key="record.id">
                                    <TableCell>{{ record.time }}</TableCell>
                                    <TableCell>{{ record.action }}</TableCell>
                                    <TableCell>{{ record.ip }}</TableCell>
                                    <TableCell>{{ record.device }}</TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                    </TabsContent>
                </Tabs>
            </CardContent>
        </Card>
        <div class="grid grid-cols-2 gap-6">

            <div class=" flex items-center space-x-4 rounded-md border p-4">
                <PhoneCall class="mr-2 h-8 w-8" />
                <div class="flex-1 space-y-1">
                    <p class="text-sm font-medium leading-none">
                        账号申诉
                    </p>
                    <p class="text-sm text-muted-foreground">
                        登录异常，手机停用
                    </p>
                </div>
                <Button variant="outline">

                    账号申诉
                </Button>
            </div>
            <div class=" flex items-center space-x-4 rounded-md border p-4">
                <UserRound class="mr-2 h-8 w-8" />
                <div class="flex-1 space-y-1">
                    <p class="text-sm font-medium leading-none">
                        注销账号
                    </p>
                    <p class="text-sm text-muted-foreground">
                        登录异常，手机停用
                    </p>
                </div>
                <Button variant="outline">
                    注销账号
                </Button>
            </div>           
        </div>
    </div>
</template>